<!--
 * @Author: weidewei
 * @Date: 2025-05-16 17:22:21
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-16 18:11:31
 * @Description: 
 * @FilePath: \v2\src\views\vue-virtual-scroller\index.vue
-->
<template>
  <div>
    <h2>虚拟滚动方案--vue-virtual-scroller</h2>
    <el-table
    :data="bigList"
    style="width: 100%"
    :row-key="row => row.id"
  >
    <!-- 表头保持原生 -->
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
    
    <!-- 自定义 body 使用虚拟滚动 -->
    <template #body>
      <RecycleScroller
        :items="data"
        :item-size="48"   
        key-field="id"
        class="virtual-scroller"
        v-slot="{ item }"
      >
        <div class="el-table__row">
          <div class="el-table__cell">{{ item.id }}</div>
          <div class="el-table__cell">{{ item.name }}</div>
          <div class="el-table__cell">{{ item.age }}</div>
          <div class="el-table__cell">{{ item.gender }}</div>
        </div>
      </RecycleScroller>
    </template>
  </el-table>
  </div>
</template>
<script>
import VirtualTable from './VirtualTable.vue'
export default {
  data() {
    return {
      bigList: [],
    };
  },
  components: { VirtualTable },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await this.$http.get("/user/list");
      console.log("res", res);
      this.bigList = res.data;
    },
  },
};
</script>
